import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'

import { useState, useEffect } from 'react'
import MySwiper from './MySwiper'
import Taro from '@tarojs/taro'
import env from '../../../store/env.config'

const MyTabs = ({ userInfo }) => {
  const [current, setCurrent] = useState(0)
  const [tabList, setTabList] = useState([])
  useEffect(() => {
    Taro.request({
      url: `${env.domain}/species/list`,
      data: {
        page: 1,
        pageSize: 10000,
        dictType: 'goods',
        token: userInfo['auth'],
      },
      success: (res) => {
        if (res.data['code'] === 200) {
          setTabList(res.data?.data?.recode)
        }
      },
    })
  }, [userInfo])
  return (
    <AtTabs
      scroll
      tabList={tabList}
      current={current}
      onClick={(val) => {
        setCurrent(val)
      }}
    >
      {tabList?.map((item, index) => {
        return (
          <AtTabsPane current={current} index={index}>
            <View style='font-size:18px;text-align:center;height:100px;'>
              <MySwiper />
            </View>
          </AtTabsPane>
        )
      })}
    </AtTabs>
  )
}

export default MyTabs
